<template>
  <div>
 <el-input v-model="query.name" placeholder="请输入用户名" style="width: 200px"></el-input>

    <el-button type="primary" @click="initAll" plain>查询</el-button>
    <el-button type="primary" @click="iniData" plain>重置</el-button>
    <el-button type="primary" @click="add" plain>添加用户</el-button>
    <el-dialog :title="mode.title" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="name">
          <el-input v-model="form.name" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="userPassword">
          <el-input v-model="form.userPassword" type="password" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="userPassword2">
          <el-input v-model="form.userPassword2" type="password" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="用户性别" prop="sex">
          <el-select v-model="form.sex" style="width: 300px">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" required>
          <el-date-picker
            v-model="form.birthTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户类别" prop="rid">
          <el-radio-group v-model="form.rid">
            <el-radio :label="1">管理员</el-radio>
            <el-radio :label="2">经理</el-radio>
            <el-radio :label="3">普通用户</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="call()">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="dialogFormVisible2" width="500px">

      <b>用户名:</b><b style="color: burlywood">{{form.userName}}</b><br>
      <b>真实姓名:</b><b style="color: burlywood">{{form.name}}</b><br>
      <b>用户性别:</b><b style="color: burlywood">
      {{ form.sex == 1 ? '男' : '' }}
      {{ form.sex == 2 ? '女' : '' }}</b><br>
      <b>出生日期:</b><b style="color: burlywood">{{ form.birthTime |format('yyyy-MM-dd hh:mm:ss') }}</b><br>
      <b>用户类型:</b><b style="color: burlywood">{{form.rname}}</b><br>
<br>

      <el-button type="primary" @click="dialogFormVisible2=false">返回</el-button>
    </el-dialog>

    <el-table
      :data="tableData"
      style="width: 100%"
      border>
      <el-table-column
        prop="userName"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="name"
        label="真实姓名">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别">
        <template slot-scope="scope">
          {{ scope.row.sex == 1 ? '男' : '' }}
          {{ scope.row.sex == 2 ? '女' : '' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="birthTime"
        label="出生日期">
        <template slot-scope="scope">
          {{ scope.row.birthTime |format('yyyy-MM-dd hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column
        prop="rname"
        label="用户类型">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-button
            @click="Info(scope.row)" type="danger" icon="el-icon-chat-line-square" circle>
          </el-button>
          <el-button
            @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" circle>
          </el-button>
          <el-button
            @click="handleDelete(scope.row.id)" type="danger" icon="el-icon-close" circle>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="text-align: right"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="query.pageNum"
                   :page-sizes="[3, 4, 6, 400]"
                   :page-size="query.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user:{},
      tableData: [],
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 3,
        name: "",
      },
      dialogFormVisible:false,
      dialogFormVisible2:false,
      form: {
        id: "",
        userName: "",
        userPassword: "",
        userPassword2: "",
        name: "",
        salt: "",
        sex: "",
        photo: "",
        birthTime: "",
        updateTime: "",
        mid: "",
        rid: "",
      },
      formLabelWidth: '100px',
      mode: {
        title: "",
        url: "",
      },
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        name: [
          {required: true, message: '请输入真实姓名', trigger: 'blur'},
        ],
        userPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        userPassword2: [
          {required: true, message: '请输入确认密码', trigger: 'blur'},
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'blur'}
        ],
        rid: [
          {required: true, message: '请选择用户类型', trigger: 'blur'}
        ],
      }
    }
  },
  filters: {
    format(value, arg) {
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value, arg);

    }
  },
  methods: {
    call(){
      this.dialogFormVisible=false;
      this.forMent();
    },
    Info(e){
      this.form=e;
      this.dialogFormVisible2=true;
    },
    handleEdit(e) {
      this.form = e;
      this.form.userPassword2=this.form.userPassword;
      this.dialogFormVisible = true;
      this.mode = {
        title: "修改",
        url: '/user/handEdit'
      }
    },
    add(){
      this.dialogFormVisible=true;
      this.forces();
      this.mode= {
        title: "添加",
          url: "/user/submitForm",
      };
    },
    submitForm() {
      if (this.form.userPassword != this.form.userPassword2) {
        this.$message.error("两次密码不一致");
      }else {
        const config = {
          headers: {"token": localStorage.getItem("token")}
        }
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.axios.post(this.mode.url, this.form, config).then((res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                this.initAll();
                this.forMent();
              } else {
                this.$message.error(res.data.msg);
              }
            })
          }
        })
      }

    },
    forces(){
      this.form = {
        id: "",
        userName: "",
        userPassword: "",
        userPassword2: "",
        name: "",
        salt: "",
        sex: "",
        photo: "",
        birthTime: "",
        updateTime: "",
        mid: "",
        rid: "",
      };
    },
    forMent() {
      this.dialogFormVisible=false;
      this.form = {
        id: "",
        userName: "",
        userPassword: "",
        userPassword2: "",
        name: "",
        salt: "",
        sex: "",
        photo: "",
        birthTime: "",
        updateTime: "",
        mid: "",
        rid: "",
      };
    },
    iniData() {
      this.query = {
        name: "",
      };
      this.query.pageNum = 1;
      this.query.pageSize = 3;
      this.initAll();
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const config = {
          headers: {"token": localStorage.getItem("token")}
        }
        this.axios.post(`/user/handDelete?id=` + id,null,config).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
            this.initAll();
          } else {
            this.$message.error(res.data.message);

          }

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    initAll() {
      const config = {
        headers: {"token": localStorage.getItem("token")}
      }
      this.axios.post(`/user/userFindPage?pageNum=` + this.query.pageNum + "&pageSize=" + this.query.pageSize, this.query,config).then((res) => {
        console.log(res.data);
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
      if (this.tableData.length == 0 && this.query.pageNum > 1) {
        this.query.pageNum--;
        this.initAll();
      }
    },

    handleSizeChange(val) {
      this.query.pageSize = val;
      this.initAll();
    },
    handleCurrentChange(val) {
      this.query.pageNum = val;
      this.initAll();
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("user"))
    this.initAll();


  }
}
</script>

<style>

</style>




